<template>
	<view class="">
		<view style="margin-bottom: 50px;">
			<swiper :swiperList="swiperList"></swiper>
			<!-- <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
				 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
				 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
						<view class="swiper-item">
							<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
							<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
						</view>
					</swiper-item>
				</swiper> -->
		</view>
		<view class="grid margin-bottom text-center col-3 partsbox ">
			<view @tap.stop="goto" class="padding partsbox-item" v-for="(item, index) in partsList" :key="item.code" :data-item="item">
				<image class="parts-img" :src="`../../static/img/${item.icon}`" mode=""></image>
				<view class="parts-text">{{ item.name }}</view>
			</view>
		</view>
		<view v-if="!(userInfo.Phone || userInfo.Data.Phone)" id="login" class=" padding flex flex-direction" style="margin-top: 10px;">
			<button class="cu-btn bg-orange lg" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
		</view>

		<!-- :hidden="!userInfo.Phone" -->
	</view>
</template>

<script>
import swiper from '@/components/swiper.vue';
import { partsList } from './util.js';
import { login } from '@/utils/request.js';
import { loginFn } from '@/utils/common.js';
export default {
	components: {
		swiper
	},
	data() {
		return {
			partsList: [],
			userInfo: {
				Phone: '1'
			},
			telePhone: '',
			swiperList: [
				{
					image: '../static/haibao.jpg'
				},
				{
					image: '../static/haibao.jpg'
				}
			],
			session: {}
		};
	},
	created() {
		this.partsList = partsList;
	},
	onShow() {
		this.userInfo = this.$store.state.uni.UserInfo || {};
		if (!this.userInfo.Phone) {
			login(
				{
					method: 'GET'
				},
				{
					callback: res => {
						this.userInfo = this.$store.state.uni.UserInfo || res;
					}
				}
			);
		}
	},
	mounted() {
		this.getLunbotu();
	},

	methods: {
		getLunbotu() {
			// uni/Config---dataType： 1:图片 2：电话号码 3.车型 ，号码是3，地图导航是4
			this.$store
				.dispatch('uni/Config', {
					dataType: 1
				})
				.then(res => {
					this.swiperList = res;
				});

			this.$store
				.dispatch('uni/Config', {
					dataType: 2
				})
				.then(res => {
					this.telePhone = res[0].DataValue;
				});

			/*	const typeArr = [1, 2];
			 typeArr.forEach((v) => {
					this.$store.dispatch('uni/Config', {
						dataType: v
					}).then(res => {
						if (v === 1) {
							console.log('res1----------:',res)
							this.swiperList = res;
						} else if (v === 2) {
							console.log('res2----------:',res)
							this.telePhone = res[0].DataValue;
							// const newdata = this.partsList.find(v => v.code == 'call').value = res[0].DataValue;
						}
					});
				}) */
		},
		goto(e) {
			const { item } = e.currentTarget.dataset;
			if (item.code === 'lineUp') {
				uni.switchTab({
					url: item.url
				});
			} else if (item.code === 'call') {
				uni.makePhoneCall({
					phoneNumber: this.telePhone
				});
			} else {
				uni.navigateTo({
					url: item.url
				});
			}
		},
		videoErrorCallback: function(e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			});
		},
		getPhoneNumber(e) {
			if (e.detail.errMsg !== 'getPhoneNumber:ok') {
				return;
			}
			const { iv, encryptedData } = e.detail;
			login(
				{
					iv,
					encryptedData,
					isEncryption: true
				},
				{
					callback: res => {
						uni.navigateTo({
							url: '/pages/user/osUserInfo?type=add'
						});
					}
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.partsbox {
	background-color: #ffffff;
	// border-radius: 15px;
	margin: 50px 8px 0 8px;
	&-item {
		border: 0.3px solid #f1f1f1;
	}
	.parts-img {
		width: 36px;
		height: 36px;
	}
}
#login {
	width: 80%;

	margin: auto auto;
	position: relative;
	animation: drop 4s infinite;
	button {
		box-shadow: 0px 6px 6px #bbb;
	}
}
@keyframes drop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	to {
		transform: scale(1);
	}
}
</style>
